<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>User on CodePen</title>
  <link rel="stylesheet" href="/stylesheets/css/main.css">
  <link rel="stylesheet" href="/stylesheets/css/flat.css">
  <link rel="shortcut icon" href="/favicon.png">
</head>

<body class="user">

  <header class="group">

    <form>

      <h1 class="logo"><a href="/">CodePen.io</a></h1>

      <div class="box-actions">

        <a href="/" class="button">
          Brand New Pen
        </a> 

      </div> <!-- div.box-actions -->

    </form>
      
  </header>

  <div class="wrap">

    <div class="user-and-settings">

      <div class="user-info group">

        <div class="avatar">

          <img src="/images/avatars/000001-chriscoyier.jpg">

          <a class="button" id="follow-this-user">
            Follow Chris
          </a>

          <!-- Conditional Logic -->

          <!-- <a class="button following" id="follow-this-user">
            ✔ Following
          </a> -->

        </div>

        <h1>Chris Coyier</h1>

        <p class="location">Palo Alto, CA</p>

        <p class="social-links">
          <a href="http://twitter.com/chriscoyier">chriscoyier</a>
          <span> // </span>
          <a href="http://chriscoyier.net">chriscoyier.net</a>
        </p>

        <div class="followage">

          <div class="minibox followers">
            <strong>182</strong>
            <span>Followers</span>
          </div>

          <div class="minibox following last">
            <strong>19</strong>
            <span>Following</span>
          </div>

        </div> <!-- div.followage -->

      </div> <!-- div.user-info -->

      <div class="clear module group">
        <h2>Settings</h2>

        <form>
        <ul class="theme-choice">
          <li class="selected">
            <label for="theme-twilight">
              <img src="/images/themes/theme-twilight.png" alt="">
              <strong>Twilight</strong>
              <input type="radio" id="theme-twilight" name="theme-choice" checked>
            <label>
          </li>
          <li>
            <label for="theme-classic">
              <img src="/images/themes/theme-classic.png" alt="">
              <strong>Classic</strong>
              <input type="radio" id="theme-classic" name="theme-choice">
            </label>
          </li>
        </ul>
        </form>

      </div>

      <div class="clear module">
        <h2>Starred Pens</h2>
      </div>

      <div class="clear module">
        <h2>Recent Activity</h2>
      </div>

    </div> <!-- div.user-and-settings -->

    <div class="owned-pens module">
        <h2>Recent CodePens</h2>
        
        <ul>
          <% for @content in @latest_contents %>
          <li>
            <iframe src="http://localhost.com:9292/full/<% @content['slug'] %>/<% @content['version']%>" allowTransparency="true" 
            frameborder="0" scrolling="no" height="100px;" style="width:100%;border:none">
            Check out my awesome CodePen!</iframe>
          </li>
          <% end %>
        </ul>

        <a href="#" class="button">View All</a>

      </div>

  </div> <!-- div.wrap -->

</body>